<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <ul>
        <li>
            <span class="reduce">-</span>
            <input type="text" value="1">
            <span class="add">+</span>
        </li>
        <li>
            <span class="reduce">-</span>
            <input type="text" value="2">
            <span class="add">+</span>
        </li>
        <li>
            <span class="reduce">-</span>
            <input type="text" value="3">
            <span class="add">+</span>
        </li>
        <li>
            <span class="reduce">-</span>
            <input type="text" value="1">
            <span class="add">+</span>
        </li>
    </ul>

    <script>


        // 沙箱模式
        //   利用闭包
        //   返回了一个对象 ， 对象里面有多个函数


        // function outer() {
        //     var a = 1;
        //     var obj = {
        //         get: function () {
        //             return a;
        //         },
        //         set: function (val) {
        //             a = val;
        //         }
        //     }
        //     return obj
        // }

        // // 得到的是一个 “箱子”
        // // const box = outer() ;

        // // box.set(10) ;

        // // console.log(box.get());


        // const box = outer();

        // const oAdd = document.querySelector('.add');
        // const oInp = document.querySelector('input');
        // const oReduce = document.querySelector('.reduce')

        // oAdd.onclick = function () {
        //     // a的值自增
        //     let n = box.get() + 1;
        //     box.set(n);
        //     oInp.value = box.get();
        // }

        // oReduce.onclick = function () {
        //     // a的值自增
        //     let n = box.get() - 1;
        //     box.set(n);
        //     oInp.value = box.get();
        // }


        function outer(i) {
            var a = oInps[i].value;
            var obj = {
                get: function () {
                    return a;
                },
                set: function (val) {
                    a = val;
                }
            }
            return obj
        }


        const oAdds = document.querySelectorAll('.add');
        const oInps = document.querySelectorAll('input');
        const oReduces = document.querySelectorAll('.reduce')


        for(let i = 0 ; i < oAdds.length ; i++) {
            // 拿到箱子
            const box = outer(i) ;
            oAdds[i].onclick = function() {
                let n = ++oInps[i].value ;
                box.set(n) ;
                oInps[i].value = box.get()
                console.log(box);
            }
        }


    </script>

</body>

</html>